<template>
      <div class="flex-container">
         <div class="hover-ttssy">
            <el-icon :size="40">
        <img :src="require('../assets/100.png')" alt="" style="width: 310px; height: 300px;margin-left:230px;margin-top: 223px;border-radius: 5px;cursor: pointer" />
         </el-icon>
         <p style="margin-left:0px;">
            华为平板笔记本电脑 华为MateBook E 笔记本电脑2023笔记本三合一
        </p>
        <p style="font-size: 16px;color: darkgrey;"><el-button style="margin-left: 100px;" type="success">购买</el-button></p>
         <el-divider />
         </div>
         <div class="hover-ttssy">
            <el-icon :size="40">
        <img :src="require('../assets/101.png')" alt="" style="width: 310px; height: 300px;margin-left:230px;margin-top: 223px;border-radius: 5px;cursor: pointer" />
         </el-icon>
         <p style="margin-left:0px;">
            华硕游戏本笔记本电脑i7玩家国度ROG飞行堡垒3060天选2联想拯救者
        </p>
        <p style="font-size: 16px;color: darkgrey;"><el-button style="margin-left: 100px;" type="success">购买</el-button></p>
         <el-divider />
         </div>
         <div class="hover-ttssy">
           <el-icon :size="40">
        <img :src="require('../assets/102.png')" alt="" style="width: 310px; height: 300px;margin-left:230px;margin-top: 223px;border-radius: 5px;cursor: pointer" />
         </el-icon>
         <p style="margin-left:0px;">
            华硕天选5Pro13代酷睿i7电竞游戏本4060显卡3060大学生笔记本电脑
        </p>
        <p style="font-size: 16px;color: darkgrey;"><el-button style="margin-left: 100px;" type="success">购买</el-button></p>
         <el-divider />
         </div>
         </div>
         <el-divider />
         <div class="flex-container">
          <div class="hover-ttssy">
            <el-icon :size="40">
        <img :src="require('../assets/103.png')" alt="" style="width: 310px; height: 300px;margin-left:230px;margin-top: 223px;border-radius: 5px;cursor: pointer" />
         </el-icon>
         <p style="margin-left:0px;">
        小米RedmiBook 16 2024英特尔酷睿标压轻薄商务
        </p>
        <p style="font-size: 16px;color: darkgrey;"><el-button style="margin-left: 100px;" type="success">购买</el-button></p>
         <el-divider />
         </div>
         <div class="hover-ttssy">
           <el-icon :size="40">
        <img :src="require('../assets/104.png')" alt="" style="width: 310px; height: 300px;margin-left:230px;margin-top: 223px;border-radius: 5px;cursor: pointer" />
         </el-icon>
         <p style="margin-left:0px;">
        【黑神话悟空】Lenovo/联想拯救者R9000P独显8G专业P图设计
        </p>
        <p style="font-size: 16px;color: darkgrey;"><el-button style="margin-left: 100px;" type="success">购买</el-button></p>
         <el-divider />
         </div>
         <div class="hover-ttssy">
            <el-icon :size="40">
        <img :src="require('../assets/105.png')" alt="" style="width: 310px; height: 300px;margin-left:230px;margin-top: 223px;border-radius: 5px;cursor: pointer" />
         </el-icon>
         <p style="margin-left:0px;">
            华硕无畏Pro15 2024新款英特尔酷睿Ultra5高性能商务轻薄本15.6英寸
        </p>
        <p style="font-size: 16px;color: darkgrey;"><el-button style="margin-left: 100px;" type="success">购买</el-button></p>
         <el-divider />
         </div>
         
         </div>
  </template>
  
  <script>
  export default {
    data() {
    },
  };
  </script>
  
  <style scoped>
   .flex-container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 子元素之间均匀分布 */
  gap: 20px; /* 子元素之间的间距 */
  margin-top: 10px;
}
  .hover-effect {
  width: 200px; /* 设置宽度 */
  height: 390px; /* 设置高度 */
  background-color: #aeb6c024; /* 设置背景颜色 */
  padding: 20px; /* 设置内边距 */
  border-radius: 5px; /* 设置圆角 */
  box-shadow: 0 4px 8px rgba(151, 150, 150, 0.2); /* 添加阴影效果 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
  cursor: pointer;
}

.hover-effect:hover {
  transform: translateY(-10px); /* 鼠标悬停时向上移动5像素 */
}
.hover-ttssy {
  width: 270px; /* 设置宽度 */
  height: 390px; /* 设置高度 */
  background-color: #94b2c525; /* 设置背景颜色 */
  padding: 20px; /* 设置内边距 */
  border-radius: 5px; /* 设置圆角 */
  box-shadow: 0 4px 8px rgba(151, 150, 150, 0.2); /* 添加阴影效果 */
  transition: transform 0.3s ease; /* 添加过渡效果 */
  cursor: pointer;
}

.hover-ttssy:hover {
  transform: translateY(-10px); /* 鼠标悬停时向上移动5像素 */
}
  .ttlst{
    width:200px;
    height: 260px;
    margin-top: -260px;
    margin-left: -360px;
    background-color: rgba(127, 192, 207, 0.144);
    border-radius: 15px;
  }
  .icon-group {
  display: flex;
  gap: 10px; /* 图标组之间的间距 */
}

.icon-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text {
  cursor: pointer;
  margin-top: 170px;
  margin-right: 20px;
  font-size: 14px;
  color: rgb(96, 99, 101);
}
.textst {
  cursor: pointer;
  margin-top: 280px;
  margin-left:-1320px;
  font-size: 14px;
  color: rgb(96, 99, 101);
}

  .border-underline {
    border-bottom: 3px solid #6f97c3; /* 下划线的宽度和颜色 */
    padding-bottom: 3px; /* 可选：调整文本与下划线之间的间距 */
  }
  .icon-text-container {
   display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.icon-text-container .el-icon {
  margin-right: 80px; /* 图标与文本之间的间距 */
}
  </style>